import { BrowserRouter, HashRouter, Routes, Route, Switch, Navigate, redirect } from "react-router-dom"
import React, { Suspense, lazy } from "react"

import Layout from "../components/Layout"
import Home from "../components/home"
import Demo1 from "../components/demo/demo1"
const Demo2 = React.lazy(() => import("../components/demo/demo2")) // 懒加载
const Demo3 = React.lazy(() => import("../components/demo/demo3"))
const Demo4 = React.lazy(() => import("../components/demo/demo4"))
const Demo5 = React.lazy(() => import("../components/demo/demo5"))
const Demo6 = React.lazy(() => import("../components/demo/demo6"))
const Demo61 = React.lazy(() => import("../components/demo/demo6_1"))
const Demo7 = React.lazy(() => import("../components/demo/demo7"))
const Demo8 = React.lazy(() => import("../components/demo/demo8"))
const Demo9 = React.lazy(() => import("../components/demo/demo9"))
const Demo10 = React.lazy(() => import("../components/demo/demo10"))
const Demo11 = React.lazy(() => import("../components/demo/demo11"))
const Demo12 = React.lazy(() => import("../components/demo/demo12"))

export default function Router1() {
    return(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Navigate to="/home" />} />
                    <Route path="home" element={<Home />} />
                    <Route path="demo1" element={<Demo1 />} />
                    <Route path="demo2" element={<Demo2 />} />
                    <Route path="demo3" element={<Demo3 />} />
                    <Route path="demo4" element={<Demo4 />} />
                    <Route path="demo5" element={<Demo5 />} />
                    <Route path="demo6" element={<Demo6 />} />
                    <Route path="demo61/:id/:age" element={<Demo61 />} />
                    <Route path="demo7" element={<Demo7 />} />
                    <Route path="demo8" element={<Demo8 />} />
                    <Route path="demo9" element={<Demo9 />} />
                    <Route path="demo10" element={<Demo10 />} />
                    <Route path="demo11" element={<Demo11 />} />
                    <Route path="demo12" element={<Demo12 />} />
                </Route>
            </Routes>
        </BrowserRouter>
    )
};


// export const router = createHashRouter([
//     {
//         path: "/",
//         element: <Layout />,
//         children: [
//             { index: true, element: <Navigate to="/home" /> },
//             { path: "home", element: <Home /> },
//             {
//                 path: "demo1",
//                 element: (
//                     <AuthWrapper requiredRoles={["admin"]}>
//                         <Demo1 />
//                     </AuthWrapper>
//                 ), // 假设需要admin权限
//                 title: "基础组件",
//             },
//             {
//                 path: "demo2",
//                 element: <Demo2 />,
//                 loader: AuthLoader, // 假设需要admin权限
//                 title: "数据声明",
//             },
//             {
//                 path: "demo3",
//                 element: <Demo3 />,
//                 title: "数据监听",
//             },
//             {
//                 path: "demo4",
//                 element: <Demo4 />,
//                 title: "组件通信",
//             },
//             {
//                 path: "demo5",
//                 element: <Demo5 />,
//                 title: "Redux使用",
//             },
//             {
//                 path: "demo6",
//                 element: <Demo6 />,
//                 title: "React路由",
//             },
//             {
//                 path: "demo7",
//                 element: <Demo7 />,
//                 title: "React插槽",
//             },
//             {
//                 path: "demo8",
//                 element: <Demo8 />,
//                 title: "React常用Hooks",
//             },
//             {
//                 path: "demo9",
//                 element: <Demo9 />,
//                 title: "组件封装",
//             },
//             {
//                 path: "demo10",
//                 element: <Demo10 />,
//                 title: "递归组件",
//             },
//             {
//                 path: "demo11",
//                 element: <Demo11 />,
//                 title: "axios使用",
//             },
//             {
//                 path: "demo12",
//                 element: <Demo12 />,
//                 title: "组件渲染",
//             },
//         ],
//     },
//     {
//         path: "demo61/:id/:age",
//         element: <Demo61 />,
//         title: "测试路由参数",
//     },
// ])

// export default router
